<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 专业管理
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="handle-box">
        <!-- <el-input
          v-model="query.name"
          placeholder="请输入学院"
          class="handle-input mr10"
        ></el-input> -->
        <el-form :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="学院">
            <el-select
              v-model="query.collegeName"
              filterable
              placeholder="请选择学院"
              @focus="getAllCollege"
            >
              <el-option
                  v-for="item in options"
                  :key="item.value"
                  :label="item.collegeName"
                  :value="item.collegeName"
                  :disabled="item.collegeName!=='全学院'? false:true"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="专业">
            <el-input
              v-model="query.name"
              placeholder="请输入专业名"
              class="handle-input mr10"
            ></el-input>
          </el-form-item>
          <!--          <el-form-item label="开设日期">-->
          <!--            <div class="block">-->
          <!--              <el-date-picker-->
          <!--                v-model="query.estabDate"-->
          <!--                type="date"-->
          <!--                placeholder="选择一个日期"-->
          <!--                format="YYYY-MM-DD"-->
          <!--                value-format="YYYY-MM-DD"-->
          <!--                :disabled-date="disabledDate"-->
          <!--                :shortcuts="shortcuts"-->
          <!--              >-->
          <!--              </el-date-picker>-->
          <!--            </div>-->
          <!--          </el-form-item>-->
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-search"
              @click="handleSearch"
              >搜索</el-button
            >
          </el-form-item>
          <el-form-item>
            <el-button
              type="primary"
              icon="el-icon-circle-plus-outline"
              @click="handleAdd"
              >新增</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div class="di">
        <el-container>
          <el-aside width="60%" class="table1">
            <div class="clist">
              <div><i class="el-icon-s-data"></i>专业信息列表</div>
            </div>
            <el-table
              :data="tableData"
              border
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                :prop="item.prop"
                :label="item.label"
                v-for="item in props"
                :key="item.prop"
                align="center"
              >
              </el-table-column>
              <el-table-column label="启用状态" align="center">
                <template #default="scope">
                  <el-switch
                    v-model="scope.row.state"
                    :active-value="1"
                    :inactive-value="0"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    @change="changeState($event, scope.row.sid)"
                  />
                </template>
              </el-table-column>
              <!-- <el-table-column label="所属学院" align="center">
          <template #default="scope">
            {{ getCollege(scope.row.collegeId) }}
          </template>
        </el-table-column> -->
              <el-table-column>
                <el-table-column
                  label="操作"
                  width="180"
                  align="center"
                  fixed="right"
                >
                  <template #default="scope">
                    <el-button
                      type="text"
                      icon="el-icon-edit"
                      @click="handleEdit(scope.row.sid)"
                      >编辑
                    </el-button>
                    <el-button
                      type="text"
                      icon="el-icon-delete"
                      class="red"
                      @click="handleDelete(scope.$index, scope.row.sid)"
                      >删除</el-button
                    >
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                :currentPage="query.pageNum"
                :page-sizes="[10, 20, 40]"
                :page-size="query.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal"
                @size-change="handleSizeChange"
                @current-change="handlePageChange"
              >
              </el-pagination>
            </div>
          </el-aside>
          <el-main>
            <div class="clist">
              <div><i class="el-icon-s-data"></i>已启用专业</div>
            </div>
            <el-table
              :data="tableDataState"
              border
              class="table"
              ref="multipleTable"
              header-cell-class-name="table-header"
            >
              <el-table-column
                :show-overflow-tooltip="true"
                :prop="item.prop"
                :label="item.label"
                v-for="item in propsState"
                :key="item.prop"
                align="center"
              >
              </el-table-column>
              <el-table-column>
                <el-table-column
                  label="操作"
                  width="180"
                  align="center"
                  fixed="right"
                >
                  <template #default="scope">
                    <el-button
                      type="text"
                      icon="el-icon-view"
                      @click="handleClassEdit(scope.row.majorName)"
                      >查看班级
                    </el-button>
                  </template>
                </el-table-column>
              </el-table-column>
            </el-table>
            <div class="pagination">
              <el-pagination
                :currentPage="query1.pageNum"
                :page-sizes="[5, 10, 15]"
                :page-size="query1.pageSize"
                layout="total, sizes, prev, pager, next, jumper"
                :total="pageTotal1"
                @size-change="handleSizeChange1"
                @current-change="handlePageChange1"
              >
              </el-pagination>
            </div>
          </el-main>
        </el-container>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, reactive, toRefs, onMounted } from "vue";

import { ElMessage, ElMessageBox } from "element-plus";
import { useRouter } from "vue-router";
import request from "../../utils/request";

export default {
  name: "Major",
  setup() {
    const root = "/major/";
    const router = useRouter();
    //获取学院
    var collegeMap = [];
    request.get("/college/map").then((res) => {
      collegeMap = res.data;
    });
    //匹配元素
    const getCollege = (id) => {
      if (id) {
        return collegeMap[id] ? collegeMap[id].collegeName : "";
      }
    };

    const collegeList = ref([]);
    request.get("/college").then((res) => {
      collegeList.value = res.data;
    });
    //修改启用状态
    const changeMajorState = (val, id) => {
      if (val) {
        var params = new URLSearchParams();
        params.set("majorId", id);
        params.set("state", val);
        // request.post("/major/updateState", "majorId=" + id + "&state=" + val);
        request.post("/major/updateState", params);
      }
    };

    //修改状态

    const changeState = (val, id) => {
      // var params = new URLSearchParams();
      // params.append("sid", id);
      // params.append("state", val);
      //request.post("/major/updateStates", params).then((res)=>{
      var major = {
        sid: id,
        state: val,
      };
      request.post("/major/updateStates", major).then((res) => {
        if (res.code != null) {
          ElMessage.error(res.msg);
        } else {
          ElMessage.success("修改成功");
          getStateData();
        }
      });
    };

    //学院下拉框
    const options = ref([]);
    const getAllCollege = () => {
      request.get("/college/getAllCollege").then((res) => {
        options.value = res.data;
        query.collegeName = res.data.collegeName;
      });
    };
    const props = [
      {label: "专业名称", prop: "majorName"},
      {label: "专业简称", prop: "shortName"},
      {label: "专业代码", prop: "majorCode"},
      {label: "专业介绍", prop: "intro"},
      // { label: "开设日期", prop: "estabDate" },
      {label: "所属学院", prop: "collegeName"},
      {label: "辅导员", prop: "adviser"},
    ];

    const query = reactive({
      name: "",
      // estabDate: "",
      collegeName: "",
      pageNum: 1,
      pageSize: 10,
    });

    const tableData = ref([]);
    const pageTotal = ref(0);
    // 获取表格数据

    const getData = () => {
      //  tableData.value=null
      request
        .get(root + "page", {
          params: query,
        })
        .then((res) => {
          if (res.code == 18) {
            ElMessage.warning(res.msg);
            tableData.value = [];
          } else {
            tableData.value = res.data.records;
            pageTotal.value = res.data.total;
          }
        });
    };
    const propsState = [
      { label: "专业名称", prop: "majorName" },
      { label: "专业简称", prop: "shortName" },
      { label: "专业代码", prop: "majorCode" },
      { label: "专业介绍", prop: "intro" },
      // { label: "开设日期", prop: "estabDate" },
    ];
    const query1 = reactive({
      majorName: "",
      pageNum: 1,
      pageSize: 10,
    });

    const tableDataState = ref([]);
    const pageTotal1 = ref(0);
    const getStateData = () => {
      request
        .get(root + "queryStateMajor", {
          params: query1,
        })
        .then((res) => {
          if (res.code == 18) {
            ElMessage.warning(res.msg);
            tableDataState.value = [];
          } else {
            tableDataState.value = res.data.records;
            pageTotal1.value = res.data.total;
          }
        });
    };
    onMounted(() => {
      getData();
      getStateData();
    });

    // 查询操作
    const handleSearch = () => {
      query.pageNum = 1;
      getData();
    };
    // 分页大小
    const handleSizeChange = (val) => {
      query.pageSize = val;
      getData();
    };
    // 分页导航
    const handlePageChange = (val) => {
      query.pageNum = val;
      getData();
    };
    // 分页大小
    const handleSizeChange1 = (val) => {
      query.pageSize = val;
      getStateData();
    };
    // 分页导航
    const handlePageChange1 = (val) => {
      query.pageNum = val;
      getStateData();
    };

    // 删除操作
    const handleDelete = (index, sid) => {
      // 二次确认删除
      ElMessageBox.confirm("确定要删除吗？", "提示", {
        type: "warning",
      })
        .then(() => {
          request.delete(root + sid).then((res) => {
            if (res.data) {
              ElMessage.success("删除成功");
              tableData.value.splice(index, 1);
            } else {
              ElMessage.error("删除失败");
            }
          });
        })
        .catch(() => {});
    };

    // 新增操作
    const handleAdd = () => {
      router.push("/admin/addMajor");
    };
    //查看班级
    const handleClassEdit = (majorName) => {
      console.log(majorName);
      router.push({
        path: "/admin/viewClasses",
        query: { majorName: majorName },
      });
    };

    // 表格编辑时弹窗和保存
    const editVisible = ref(false);
    let form = reactive({
      name: "",
      address: "",
    });
    const handleEdit = (sid) => {
      router.push({ path: "/admin/addMajor", query: { id: sid } });
    };

    const state = reactive({
      disabledDate(time) {
        return time.getTime() > Date.now();
      },
    });

    return {
      props,
      query,
      query1,
      collegeList,
      tableData,
      pageTotal,
      pageTotal1,
      editVisible,
      form,
      options,
      propsState,
      tableDataState,
      changeState,
      ...toRefs(state),
      getAllCollege,
      handleClassEdit,
      getCollege,
      changeMajorState,
      handleSearch,
      handleSizeChange,
      handlePageChange,
      handleSizeChange1,
      handlePageChange1,
      handleAdd,
      handleDelete,
      handleEdit,
    };
  },
};
</script>

<style scoped>
.clist {
  background: #3ca2e0;
  height: 50px;
  font-size: 25px;
  display: flex;
  align-items: center;
}
.clist div {
  text-align: left;
  color: white;
}
.di {
  display: flex;
}

.handle-box {
  margin-bottom: 20px;
}
handle-box.input{
  width: 120px;
}

.handle-select {
  width: 120px;
}

.handle-input {
  width: 200px;
  display: inline-block;
}
.table {
  width: 100%;
  font-size: 14px;
}
.red {
  color: #ff0000;
}
.mr10 {
  margin-right: 10px;
}
.table1 {
  margin-top: 20px;
}
.table-td-thumb {
  display: block;
  margin: auto;
  width: 40px;
  height: 40px;
}
</style>
